<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>ws推流</title>

  <script type="text/javascript">
    function WebSocketTest1() {
      var idx = 0;
      idx = count;
      var divEle = document.getElementById("tf1");
      var imgEle = document.createElement("img");
      imgEle.id = 'imgv' + idx
      imgEle.width = 400
      divEle.appendChild(imgEle);
      count += 1;
      var time = new Date().getTime();

      if ("WebSocket" in window) {

        // 打开一个 web socket
        var ws = new WebSocket("ws://192.168.130.216:19020/api/v1/ws/stream");


        ws.onopen = function () {

          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send('10,rtsp://admin:seedlandcv2019@192.168.130.191:554');

          console.log("数据发送完成...");
        };

        ws.onmessage = function (evt) {

          var img = evt.data;
          console.log('get msg', new Date().getTime() - time)
          time = new Date().getTime();
          document.getElementById("imgv" + idx).src = img;
        };

        ws.onclose = function () {
          // 关闭 websocket
          alert("连接已关闭...");
        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    }

    var count = 0;
  </script>

</head>

<body>
  <div id="tf3">
    <a href="javascript:WebSocketTest1()">运行 WebSocket1</a>
  </div>

  <div id="tf1">
    <img id='img0' width=400 src=''></img>

  </div>

</body>

</html>